<template>
  <div class="disc">
    <!-- <h4>网友精选碟</h4> -->
    <van-tabs
      v-model="active"
      sticky
      animated
      duration="0.6"
      line-width="150"
      title-style="font-weight:bolder"
      color="#ec4141"
      title-active-color="#ec4141"
      class="disc_tips"
    >
      <van-tab title="网友精品歌单" dot>
        <van-row type="flex" justify="space-around">
          <van-col
            span="11"
            v-for="(item, index) in recomlist"
            :key="index"
            @click="getList(item.id, item.name)"
            class="recom"
          >
            <van-image
              fit="fill"
              width="2.4rem"
              height="2.4rem"
              class="imgradius"
              :src="item.picUrl"
            />
            <p id="ph">{{ item.name }}</p>
            <p class="time">
              <van-icon name="clock-o" class="timeicon" />{{
                item.trackNumberUpdateTime | dateFormat
              }}
            </p>
            <van-tag round type="primary" class="palycount">
              <van-icon name="audio" sieze="8px" />{{
                item.playCount | changenum
              }}
            </van-tag>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="网友精选碟" badge="10">
        <van-row type="flex" justify="space-around">
          <van-col span="24" class="vancol">
            <div
              v-for="(item, index) in musicsum"
              :key="index"
              class="listitem"
              @click="getList(item.id, item.name)"
            >
              <van-row>
                <van-col span="5" offset="1" class="">
                  <van-image
                    fit="fill"
                    width="1.5rem"
                    height="1.5rem"
                    class="coverradius"
                    :src="item.coverImgUrl"
                  />
                </van-col>
                <van-col span="17" offset="1">
                  <p id="ph2">{{ item.name }}</p>
                  <p class="listInfo">
                    <van-icon name="audio" sieze="5" class="counticon" />{{
                      item.playCount | changenum
                    }}
                    <span class="tag">{{ item.tags.join(" / ") }}</span>
                  </p>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import axios from "axios";
import { _dateFormat } from "@/api/dateFormat";
// import NavBar from "@/components/NavBar.vue";
export default {
  name: "Recommend",
  data() {
    return {
      banners: "",
      musicsum: "",
      recommend: "",
      visible: false,
      active: 0,
      recomlist: "",
      showside: false,
      loadingtip: true,
      text: "",
    };
  },
  created() {
    // 获取推荐歌单
    axios({
      url: "/personalized?limit=8",
    }).then((res) => {
      console.log(res);
      this.recomlist = res.data.result;
    });
    // 歌单 ( 网友精选碟 )
    axios({
      url: "/top/playlist",
      params: {
        cat: "华语",
        limit: 7,
      },
    }).then((res) => {
      console.log(res);
      this.musicsum = res.data.playlists;
    });
  },
  mounted() {
    setTimeout(() => {
      this.loadingtip = false;
    }, 2000);
  },
  methods: {
    getList(id, name) {
      // console.log(id);
      this.$router.push({
        path: "/MusicSheetList",
        query: {
          id: id,
          sheetname: name,
        },
      });
    },
    showpopup() {
      this.showside = !this.showside;
    },
  },
  filters: {
    changenum(num) {
      if (num >= 100000000) {
        num = Math.round(num / 10000000) / 10 + "亿";
      } else if (num >= 10000) {
        num = Math.round(num / 1000) / 10 + "万";
      }
      return num;
    },
    //格式化后台传过来的时间戳
    dateFormat(time) {
      let date = new Date(time);
      return _dateFormat(date, "yyyy/MM/dd hh:mm");
    },
  },
};
</script>

<style scoped>
#ph {
  font-size: 0.27rem;
}
#ph2 {
  font-size: 0.4rem;
}
.disc {
  height: 600px;
  width: 100%;
}
.disc_tips {
  height: 500px;
  width: 100%;

  display: inline-block;
  text-align: justify;
  text-align-last: left;
  margin-left: 5px;
}
.typetitle {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 1;
}
.loading {
  margin: 50% auto;
}
.home {
  margin-bottom: 60px;
  background: #f1f3f3;
}
.coverradius {
  border-radius: 5px;
}
.gridborder {
  border-top: 5px solid #f5f5f5;
  border-bottom: 5px solid #f5f5f5;
}
.listitem {
  background: white;
  margin-top: 6px;
  padding: 5px 2px;
}
.listInfo {
  color: #6f7880;
  margin-top: 20px;
  font-size: 0.3rem;
}
.tag {
  color: #6f7880;
  margin-right: 10px;
  float: right;
}
.recom {
  margin-top: 6px;
  /* background: white; */
  position: relative;
}
.palycount {
  position: absolute;
  left: 25px;
  top: 5px;
  background: #ec4141;
  font-size: 0.2rem;
}
.time {
  margin-top: 3px;
  font-size: 10px;
  color: #585353;
}
.timeicon {
  position: relative;
  top: 2px;
  margin-right: 3px;
}
.counticon {
  font-size: 10px;
}
.imgradius {
  margin-left: 25px;
}
</style>